<template>
  <div>
    <van-nav-bar fixed :title="title" class="color-white bg-primary" left-arrow @click-left="$utils.back($route.path);" />
    <div class="has-top ">
      <div class="pd-24 pb-0 pos-r">
        <div class="head-bg bg-primary" />
        <productItem class="box-shadow" :data="productData" />
        <div id="scrollBox" ref="scrollBox" class="scrollBox">
          <detailItem v-for="(item,index) in list" :key="index" :data="item" />
          <no-data v-if="list.length === 0" />
          <p v-if="end===true&&list.length!==0" class="tac fs-24 ptb-40 color-gray-light">无更多数据</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import productItem from 'components/orderCount/productItem'
import detailItem from 'components/orderCount/detailItem'
import noData from 'components/noData'
import { GetProductInfo } from 'api/product'
import { GetUserTeamOrderPage } from 'api/order'
export default {
  name: 'MyTeam',
  components: { productItem, detailItem, noData },
  // props: {
  //   productId: { // 商品id
  //     type: Number,
  //     required: true,
  //     default: 0
  //   }
  // },
  data() {
    return {
      productData: {},
      title: '',
      list: [],
      // 请求参数
      requestData: {
        pageIndex: 1,
        pageSize: 10
      },

      // 滚动状态
      totalAmout: 0,
      scollRequest: true,
      scollTop: 0,
      end: false
    }
  },
  computed: {
  },
  // watch: {
  //   productId(newId, oldId) {
  //     this.GetPurchaseProductDetailPage(newId)
  //   }
  // },
  created() {
    console.log(this.$route.query)

    this.GetProductInfo(this.$route.query.productid)
    this.title = this.$route.query.name
    this.requestData.userId = Number(this.$route.query.userid)
    this.requestData.productId = Number(this.$route.query.productid)
    this.GetUserTeamOrderPage()
  },
  mounted() {
    this.$nextTick(function() {
      document.querySelector('#scrollBox').addEventListener('scroll', this.onScroll)
    })
  },
  methods: {
    GetProductInfo(productId) {
      GetProductInfo({ productId }).then(res => {
        if (res) {
          this.productData = res.Data
        }
      })
    },
    // 滚动事件触发下拉加载
    onScroll() {
      const _this = this
      if (_this.scollRequest === true) {
        if (this.$utils.getScrollHeight('scrollBox') - this.$utils.getClientHeight('scrollBox') - this.$utils.getScrollTop('scrollBox') <= 5) {
          console.log('触')
          _this.scollRequest = false
          // alert('触发！！！')
          console.log('加载')
          _this.scollTop = this.$utils.getScrollTop('scrollBox')
          if (_this.requestData.pageIndex < _this.totalAmout) {
            _this.requestData.pageIndex++
            _this.GetUserTeamOrderPage()
          } else {
            console.log('end')
            _this.end = true
          }
          // }
        }
      }
    },
    GetUserTeamOrderPage() {
      this.scollRequest = false
      GetUserTeamOrderPage(this.requestData).then(res => {
        this.scollRequest = true
        if (res) {
          console.log(res)
          if (this.requestData.pageIndex == 1) {
            this.list = []
          }
          this.totalAmout = res.TotalAmout
          this.list = this.list.concat(res.Data)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.color-white{
  /deep/.van-nav-bar__title,/deep/.van-icon{
    color:$colorF;
  }
}
.head-bg{
  position: absolute;
  height: 170px;
  width: 100%;
  top: 0;
  left: 0;
  border-radius: 0 0 30px 30px;
}
.box-shadow{
  box-shadow:0px 2px 14px 0px rgba(0, 0, 0, 0.1);
}
.scrollBox{
  height: calc(100vh - 330px);
  // height:100px;
  overflow-y: auto;
}
.van-hairline--bottom::after {
    border-bottom: none;
}
</style>
